<template>
  <div>
    <el-container class="adminWrapper">
      <el-aside width="200px">
         <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;" class="collaspe">
                <el-radio-button :label="false">展开</el-radio-button>
                <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>
          <el-menu :router='true' class="el-menu-vertical-demo"  :collapse="isCollapse" >
              <el-menu-item v-for="route in singNav" :key="route.path" :index="route.path">
               <i :class="route.icon"></i>
               <span slot="title">{{route.name}}</span>
              </el-menu-item>
              <el-submenu  v-for="route in checkBoxNavRoutes" :key="route.path" :index="route.path">
                <template slot="title">
                    <i :class="route.icon"></i>
                    <span slot="title">{{route.name}}</span>
                </template>
                <el-menu-item  v-for="sec in route.children" :key="sec.path" :index="sec.path">
                      <i :class="sec.icon"></i>
                      <span slot="title">{{sec.name}}</span>
                </el-menu-item> 
              </el-submenu>
            </el-menu> 
      </el-aside>
      <el-container>
        <el-header>
          <h2>vue后台管理系统</h2>
          <div class="userInfo">
              <el-avatar :src="this.userInfo.avatar" class="user_avatar" :size=60></el-avatar>
              <el-dropdown>
                <span class="el-dropdown-link">
                  {{this.userInfo.userName}}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="$router.push('/admin/message')">消息中心</el-dropdown-item>
                  <el-dropdown-item @click.native="logiout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>我是底部版权信息展示处</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default { 
  name: 'Home',
  data(){
    return{
      userInfo:{},
      isCollapse: false,
      singNav:[],
      checkBoxNavRoutes:[]
    }
  },
  mounted(){
    //获取userINfo
    let userInfo=JSON.parse(localStorage.getItem("userInfo"))
    this.userInfo=userInfo
    //获取子路由数组
    let routeArr=this.$router.options.routes.filter((route)=>route.admin)[0].children
    //需要获取在侧边展示的子路由，在过滤一遍，
    let newRouteArr=routeArr.filter(route=>route.meta.isNav)
    // 在过滤一遍，不同角色显示不同导航
    let singleNavRoutes=newRouteArr.filter((route)=>route.meta.isOnlyNav)
    let singNav=singleNavRoutes.filter((route)=>{
      return route.meta.roles.some((role)=>{
        return role===userInfo.role
      })
    })
    this.singNav=singNav
    // 处理二级导航的权限管理
    // 判断显示不显示，在判断内部显示多少

//拿到所有多选导航的数组
  let checkboxArr=newRouteArr.filter((route)=>route.meta.isOnlyNav===false)
  //过滤第一遍，展示权限显示的，得到符合权限的所有多选导航
  let newArr=checkboxArr.filter((el)=>{
    return el.meta.roles.some((role)=>{
      return role===userInfo.role
    })
  })
//在对多选导航进行深层次的过滤，每个多选导航也有不同权限
  for(var i=0;i<newArr.length;i++){
    let arr=newArr[i].children.filter((el)=>{
      return el.meta.roles.some((role)=>{
        return role===userInfo.role
      })
    })
    newArr[i].children=arr;
  }
  this.checkBoxNavRoutes=newArr
  },
  methods:{
    logiout(){
      localStorage.removeItem("userInfo")
      localStorage.removeItem("accessToken")
      this.$router.go(0)
    }
  }
 
}
</script>
<style lang="scss" scoped>
.adminWrapper{
  height:100vh;
}
.logo img{
  width:100%;
}
.el-header, .el-footer {
    background-color: #79797c;
    color: rgb(248, 247, 247);
    text-align: center;
    line-height: 60px;
    position:relative;
  }
  .el-header .userInfo{
    position:absolute;
    top:0;
    right:0;
    height:60px;
    width:200px;
    margin-right:30px;

    .user_avatar{
      vertical-align: middle;
      margin-right:10px;
    }
    .el-dropdown-link {
    cursor: pointer;
    color: #f6f8fa;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-menu-vertical-demo{
    text-align:left;

  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }



</style>